<template>
  <div class="report-container">
    <div class="page-header">
      <h2>报表管理</h2>
    </div>
    
    <!-- 筛选条件 -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报表类型">
          <el-select v-model="filterForm.reportType" placeholder="请选择">
            <el-option label="订单统计" value="order"></el-option>
            <el-option label="销售额统计" value="sales"></el-option>
            <el-option label="商家统计" value="merchant"></el-option>
            <el-option label="骑手统计" value="rider"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateReport">生成报表</el-button>
          <el-button type="success" @click="exportReport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 图表展示区域 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{ reportTitle }}</span>
          </div>
          <div class="chart-container">
            <div class="chart-placeholder">图表将在这里显示</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>占比分析</span>
          </div>
          <div class="chart-container">
            <div class="chart-placeholder">饼图将在这里显示</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 表格数据展示 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <div slot="header">
        <span>数据明细</span>
      </div>
      <el-table :data="tableData" style="width: 100%" border v-loading="loading">
        <el-table-column v-for="(column, index) in tableColumns" :key="index" 
          :prop="column.prop" :label="column.label" :width="column.width">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReportManagement',
  data() {
    return {
      filterForm: {
        dateRange: [this.getLastWeekDate(), this.getTodayDate()],
        reportType: 'order'
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableColumns: [],
      reportTitle: '订单统计报表'
    }
  },
  created() {
    this.generateReport();
  },
  methods: {
    getTodayDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getLastWeekDate() {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    generateReport() {
      this.loading = true;
      
      // 根据选择的报表类型设置表格列和标题
      switch(this.filterForm.reportType) {
        case 'order':
          this.tableColumns = [
            { prop: 'date', label: '日期', width: '120' },
            { prop: 'orderCount', label: '订单数量', width: '120' },
            { prop: 'totalAmount', label: '订单金额', width: '120' },
            { prop: 'completeRate', label: '完成率', width: '120' },
            { prop: 'avgAmount', label: '客单价', width: '120' }
          ];
          this.reportTitle = '订单统计报表';
          break;
        case 'sales':
          this.tableColumns = [
            { prop: 'date', label: '日期', width: '120' },
            { prop: 'salesAmount', label: '销售额', width: '150' },
            { prop: 'platformFee', label: '平台佣金', width: '150' },
            { prop: 'merchantAmount', label: '商家收入', width: '150' },
            { prop: 'riderAmount', label: '骑手收入', width: '150' }
          ];
          this.reportTitle = '销售额统计报表';
          break;
        case 'merchant':
          this.tableColumns = [
            { prop: 'merchantName', label: '商家名称', width: '180' },
            { prop: 'orderCount', label: '订单数量', width: '120' },
            { prop: 'totalAmount', label: '销售额', width: '150' },
            { prop: 'avgRating', label: '平均评分', width: '120' }
          ];
          this.reportTitle = '商家统计报表';
          break;
        case 'rider':
          this.tableColumns = [
            { prop: 'riderName', label: '骑手姓名', width: '120' },
            { prop: 'deliveryCount', label: '配送单数', width: '120' },
            { prop: 'totalAmount', label: '配送收入', width: '150' },
            { prop: 'avgTime', label: '平均送达时间(分钟)', width: '180' },
            { prop: 'rating', label: '评分', width: '120' }
          ];
          this.reportTitle = '骑手统计报表';
          break;
      }
      
      // 模拟生成数据
      setTimeout(() => {
        if (this.filterForm.reportType === 'order' || this.filterForm.reportType === 'sales') {
          this.generateDateData();
        } else if (this.filterForm.reportType === 'merchant') {
          this.generateMerchantData();
        } else if (this.filterForm.reportType === 'rider') {
          this.generateRiderData();
        }
        
        this.loading = false;
        this.$message.success('报表生成成功');
      }, 800);
    },
    generateDateData() {
      const startDate = new Date(this.filterForm.dateRange[0]);
      const endDate = new Date(this.filterForm.dateRange[1]);
      
      const data = [];
      for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
        const date = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
        
        if (this.filterForm.reportType === 'order') {
          const orderCount = Math.floor(Math.random() * 100) + 50;
          const totalAmount = Math.floor(Math.random() * 10000) + 5000;
          const completeRate = (Math.random() * 0.2 + 0.8).toFixed(2);
          data.push({
            date,
            orderCount,
            totalAmount: `¥${totalAmount.toFixed(2)}`,
            completeRate: `${(completeRate * 100).toFixed(1)}%`,
            avgAmount: `¥${(totalAmount / orderCount).toFixed(2)}`
          });
        } else {
          const salesAmount = Math.floor(Math.random() * 20000) + 10000;
          const platformFee = salesAmount * 0.1;
          const merchantAmount = salesAmount * 0.8;
          const riderAmount = salesAmount * 0.1;
          data.push({
            date,
            salesAmount: `¥${salesAmount.toFixed(2)}`,
            platformFee: `¥${platformFee.toFixed(2)}`,
            merchantAmount: `¥${merchantAmount.toFixed(2)}`,
            riderAmount: `¥${riderAmount.toFixed(2)}`
          });
        }
      }
      
      this.tableData = data;
      this.total = data.length;
    },
    generateMerchantData() {
      const merchants = [
        '品味中餐馆', '川味小馆', '意式披萨屋', '麦香汉堡', '粤菜轩', 
        '淮扬美食', '东北饺子馆', '快乐快餐', '川湘鲜味', '韩式炸鸡'
      ];
      
      const data = merchants.map(merchantName => {
        const orderCount = Math.floor(Math.random() * 200) + 80;
        const totalAmount = Math.floor(Math.random() * 20000) + 8000;
        const avgRating = (Math.random() * 1 + 4).toFixed(1);
        return {
          merchantName,
          orderCount,
          totalAmount: `¥${totalAmount.toFixed(2)}`,
          avgRating
        };
      });
      
      this.tableData = data;
      this.total = data.length;
    },
    generateRiderData() {
      const riders = [
        '张三', '李四', '王五', '赵六', '钱七', 
        '孙八', '周九', '吴十', '郑十一', '王十二'
      ];
      
      const data = riders.map(riderName => {
        const deliveryCount = Math.floor(Math.random() * 100) + 30;
        const totalAmount = Math.floor(Math.random() * 5000) + 1500;
        const avgTime = Math.floor(Math.random() * 20) + 25;
        const rating = (Math.random() * 1 + 4).toFixed(1);
        return {
          riderName,
          deliveryCount,
          totalAmount: `¥${totalAmount.toFixed(2)}`,
          avgTime,
          rating
        };
      });
      
      this.tableData = data;
      this.total = data.length;
    },
    exportReport() {
      this.$message({
        message: '报表已导出到本地',
        type: 'success'
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
.report-container {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
.filter-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.chart-container {
  height: 350px;
}
.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  color: #909399;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 